<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { RefreshRight, Search } from '@element-plus/icons-vue'
  import Goods from './Goods.vue'
  import { nextTick } from 'vue'
  import CustomerGoods from './CustomerGoods.vue'
  import NoRegisterGoods from './NoRegisterGoods.vue'
  import useGoods from '../useGoods'

  const { addGood, clearAllGoods, removeGood, clearAllNoRegisterCodes, clearAllRegisterCodes } =
    useGoods()

  defineOptions({
    name: 'SelectGoodOrderCreate',
  })
  const emits = defineEmits(['change-goods'])
  const props = defineProps({
    factoryId: {
      type: String,
      default: () => '',
    },
    userId: {
      type: String,
      default: () => '',
    },
  })

  const visible = defineModel('visible', { type: Boolean, default: false })
  const activeName = ref<'goods' | 'customerGoods' | 'noRegisterGood'>('noRegisterGood')
  const goodsInstance = ref<InstanceType<typeof Goods> | null>(null)
  const getGoodListParam = ref({
    brandId: '',
    model: '',
    name: '',
    specs: '',
  })
  const customerGoodsInstance = ref<InstanceType<typeof CustomerGoods> | null>(null)
  const getRegisteredCodeListParam = ref({
    code: '',
    model: '',
  })
  const noRegisterGoodsInstance = ref<InstanceType<typeof NoRegisterGoods> | null>(null)
  const getNoRegisterCodeListParam = ref({
    code: '',
    model: '',
    registerCode: '',
  })

  const getList = () => {
    nextTick(() => {
      switch (activeName.value) {
        case 'goods':
          if (goodsInstance.value) {
            goodsInstance.value.getGoodTypeOptionList()
            goodsInstance.value.getGoodList(
              getGoodListParam.value.brandId,
              getGoodListParam.value.name,
              getGoodListParam.value.specs,
              getGoodListParam.value.model,
            )
          }
          break
        case 'customerGoods':
          if (customerGoodsInstance.value && props.userId) {
            customerGoodsInstance.value.getList(
              getRegisteredCodeListParam.value.code,
              getRegisteredCodeListParam.value.model,
              props.userId,
            )
          }
          break
        case 'noRegisterGood':
          if (noRegisterGoodsInstance.value) {
            noRegisterGoodsInstance.value.getList(
              getNoRegisterCodeListParam.value.code,
              getNoRegisterCodeListParam.value.model,
              getNoRegisterCodeListParam.value.registerCode,
            )
          }
          break
      }
    })
  }

  const onReset = () => {
    switch (activeName.value) {
      case 'goods':
        getGoodListParam.value = {
          brandId: '',
          name: '',
          specs: '',
          model: '',
        }
        break
      case 'customerGoods':
        getRegisteredCodeListParam.value = {
          code: '',
          model: '',
        }
        break
      case 'noRegisterGood':
        getNoRegisterCodeListParam.value = {
          code: '',
          model: '',
          registerCode: '',
        }
    }
    getList()
  }

  const onConfirm = () => {
    if (goodsInstance.value) {
      const goodsVo = goodsInstance.value.getSelectedGoodList()
      const deleteGoods = goodsInstance.value.getUnSelectedGoods()

      if (goodsVo.length <= 0) {
        clearAllGoods()
      }

      goodsVo.forEach((good) => {
        addGood({
          code: '',
          goodsName: good.name,
          goodsSpecName: good.specName,
          goodsBrand: good.brand,
          qty: 1,
          img: good.image,
          buyTime: '',
          name: '',
          phone: '',
          province: '',
          saleModels: good.saleModels || '',
          city: '',
          area: '',
          town: '',
          address: '',
          isEmptyLine: false,
          type: 3,
          goodId: good.id,
          goodSpecId: good.specId,
          codeId: '',
          goodsSpecCode: good.code,
          warrantyDay: good.warrantyDay,
          warrantyEndTime: '',
          warrantyStartTime: '',
          userId: '',
          registerCode: '',
        })
      })

      deleteGoods.forEach((good) => {
        removeGood(good.id, good.specId, good.code)
      })
    }

    if (customerGoodsInstance.value) {
      const goodsVo = customerGoodsInstance.value.getSelectedRegisterCodes()
      const deleteGoods = customerGoodsInstance.value.getUnSelectedRegisterCodes()

      if (goodsVo.length <= 0) {
        clearAllRegisterCodes()
      }
      goodsVo.forEach((registerCode) => {
        addGood({
          code: registerCode.code,
          goodsName: registerCode.goodsName,
          goodsSpecName: registerCode.goodsSpecName,
          goodsBrand: registerCode.goodsBrand,
          qty: 1,
          img: '',
          buyTime: '',
          name: registerCode.name,
          phone: registerCode.phone,
          province: registerCode.province,
          city: registerCode.city,
          area: registerCode.area,
          town: registerCode.town,
          saleModels: registerCode.saleModels || '',
          address: registerCode.address,
          isEmptyLine: false,
          type: 1,
          goodId: registerCode.goodsId,
          goodSpecId: registerCode.goodsSpecId,
          codeId: registerCode.id,
          goodsSpecCode: registerCode.goodsCode || '',
          warrantyDay: registerCode.warrantyDay,
          warrantyEndTime: registerCode.warrantyEndTime,
          warrantyStartTime: registerCode.warrantyStartTime,
          userId: registerCode.userId,
          registerCode: '',
        })
      })

      deleteGoods.forEach((good) => {
        removeGood(good.goodsId, good.goodsSpecId, good.code)
      })
    }

    if (noRegisterGoodsInstance.value) {
      const goodsVo = noRegisterGoodsInstance.value.getSelectedNoRegisterCodes()
      const deleteGoods = noRegisterGoodsInstance.value.getUnSelectedNoRegisterCodes()

      if (goodsVo.length <= 0) {
        clearAllNoRegisterCodes()
      }

      noRegisterGoodsInstance.value.getSelectedNoRegisterCodes().forEach((noRegister) => {
        addGood({
          code: noRegister.code,
          goodsName: noRegister.goodsName,
          goodsSpecName: noRegister.goodsSpecName,
          goodsBrand: noRegister.goodsBrand,
          qty: 1,
          img: '',
          buyTime: noRegister.warrantyStartTime || '',
          name: noRegister.name || '',
          phone: noRegister.phone || '',
          province: noRegister.province || '',
          city: noRegister.city || '',
          saleModels: noRegister.saleModels || '',
          area: noRegister.area || '',
          town: noRegister.town || '',
          address: noRegister.address || '',
          isEmptyLine: false,
          type: !noRegister.userId || noRegister.userId === '0' ? 2 : 1,
          goodId: noRegister.goodsId,
          goodSpecId: noRegister.goodsSpecId,
          codeId: noRegister.id,
          goodsSpecCode: noRegister.goodsCode,
          warrantyDay: noRegister.warrantyDay,
          warrantyEndTime: noRegister.warrantyEndTime || '',
          warrantyStartTime: noRegister.warrantyStartTime || '',
          userId: noRegister.userId || '',
          registerCode: noRegister.registerCode || '',
        })
      })

      deleteGoods.forEach((good) => {
        removeGood(good.goodsId, good.goodsSpecId, good.code)
      })
    }
    emits('change-goods')

    visible.value = false
  }

  watch(
    visible,
    async (value) => {
      if (value) {
        // await getBrandOptions()
        getList()
      }
    },
    { immediate: true },
  )
</script>

<template>
  <h-drawer v-model="visible" title="选择产品" :width="1200" unit="px">
    <div class="tabs-wrapper">
      <div class="tabs-header">
        <el-tabs v-model="activeName" @tab-change="getList">
          <el-tab-pane label="选择条码" name="noRegisterGood" />
          <el-tab-pane label="客户产品" name="customerGoods" />
          <el-tab-pane label="产品列表" name="goods" />
        </el-tabs>

        <template v-if="activeName === 'goods'">
          <div class="header">
            <!-- <el-select
              v-model="getGoodListParam.brandId"
              :collapse-tags="true"
              :max-collapse-tags="2"
              :collapse-tags-tooltip="true"
              :loading="getBrandOptionsLoading"
              clearable
              @change="getList"
              @clear="getList"
            >
              <template #header>
                <div class="select-header">
                  <el-input
                    v-model.trim="getBrandOptionsParam.name"
                    placeholder="请输入关键字"
                    @keyup.enter="getBrandOptions"
                  ></el-input>
                  <h-plain-button @click="getBrandOptions">搜索</h-plain-button>
                </div>
              </template>
              <el-option
                v-for="(brand, brandIndex) in brandOptions"
                :key="brandIndex"
                :label="brand.name"
                :value="brand.id"
              ></el-option>
            </el-select> -->
            <el-input
              v-model.trim="getGoodListParam.name"
              clearable
              placeholder="产品编号"
              @clear="getList"
              @keyup.enter="getList"
            />
            <el-input
              v-model.trim="getGoodListParam.model"
              clearable
              placeholder="产品名称"
              @clear="getList"
              @keyup.enter="getList"
            />
            <el-input
              v-model.trim="getGoodListParam.specs"
              clearable
              placeholder="产品规格"
              @clear="getList"
              @keyup.enter="getList"
            />
            <HButton type="primary" @click="getList">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton style="margin: 0" @click="onReset">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </template>

        <template v-if="activeName === 'customerGoods'">
          <div class="customer_product_header header">
            <el-input
              v-model.trim="getRegisteredCodeListParam.code"
              placeholder="输入条码查询"
              clearable
              @clear="getList"
              @keyup.enter="getList"
            />
            <el-input
              v-model.trim="getRegisteredCodeListParam.model"
              placeholder="输入产品名称/编号查询"
              clearable
              @clear="getList"
              @keyup.enter="getList"
            />
            <HButton type="primary" @click="getList">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="onReset">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </template>

        <template v-if="activeName === 'noRegisterGood'">
          <div class="not_register_product header">
            <el-input
              v-model.trim="getNoRegisterCodeListParam.code"
              placeholder="输入条码查询"
              clearable
              @clear="getList"
              @keyup.enter="getList"
            />
            <!-- <el-input
              v-model.trim="getNoRegisterCodeListParam.registerCode"
              placeholder="请输入资产码"
              clearable
              @clear="getList"
              @keyup.enter="getList"
            /> -->
            <el-input
              v-model.trim="getNoRegisterCodeListParam.model"
              placeholder="输入产品编号"
              clearable
              @clear="getList"
              @keyup.enter="getList"
            />
            <HButton type="primary" @click="getList">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="onReset">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </template>
      </div>
      <div class="tabs-content">
        <template v-if="activeName === 'goods'">
          <Goods ref="goodsInstance" />
        </template>

        <template v-if="activeName === 'customerGoods'">
          <CustomerGoods ref="customerGoodsInstance" :user-id="props.userId" />
        </template>

        <template v-if="activeName === 'noRegisterGood'">
          <NoRegisterGoods ref="noRegisterGoodsInstance" />
        </template>
      </div>
    </div>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="visible = false">取消</h-button>
    </template>
  </h-drawer>
</template>

<style scoped lang="scss">
  .select-header {
    display: flex;
    column-gap: 5px;
  }

  .tabs-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .tabs-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dcdfe6;
      padding: 0 8px;

      :deep(.el-tabs) {
        .el-tabs__header {
          margin: 0;

          .el-tabs__nav-wrap {
            &::after {
              display: none !important;
            }
          }
        }
      }

      .header {
        display: flex;
        column-gap: 5px;

        :deep(.el-select) {
          width: 140px;
        }

        :deep(.el-input) {
          width: 200px;
        }
      }
    }

    .tabs-content {
      flex: 1;
      height: 0;
    }
  }
</style>
